<script lang="ts" setup>
import { ref, onBeforeMount, onMounted, onUnmounted } from "vue";
import { useRouter } from "vue-router";
import { Document, Service, QuestionFilled, Opportunity, School, OfficeBuilding } from "@element-plus/icons-vue";
import headerIndex from "./components/headerIndex.vue";
import footerIndex from "./components/footerIndex.vue";

const router = useRouter();
const activeTab = ref("service");

// 合作伙伴图片
const partnerLogo =
    "https://tse1-mm.cn.bing.net/th/id/OIP-C.x_j4oT7PxgXHjBxp7DRaYwHaHa?w=163&h=180&c=7&r=0&o=5&pid=1.7";

// 服务类型数据
const serviceItems = ref([
    {
        title: "简历辅导",
        icon: Document,
        description: "专业的简历制作辅导，帮助求职者打造具有竞争力的个人简历",
        detail: "由经验丰富的职业规划师提供一对一简历修改建议，从简历排版、内容组织到亮点展示，全方位提升简历质量，增加求职成功率。",
    },
    {
        title: "就业咨询",
        icon: Service,
        description: "提供专业的就业方向咨询，帮助学生确定职业发展方向",
        detail: "根据个人特长、专业背景和就业市场需求，由职业规划专家提供科学的职业规划建议，明确就业方向，制定求职策略。",
    },
    {
        title: "面试指导",
        icon: Opportunity,
        description: "模拟面试训练，提供面试技巧和经验分享",
        detail: "提供一对一模拟面试训练，针对不同行业、不同岗位的面试特点，教授面试技巧，分析面试常见问题及回答方法，提高面试成功率。",
    },
    {
        title: "校企对接",
        icon: School,
        description: "搭建校企合作平台，为企业和学生提供精准匹配",
        detail: "为高校和企业搭建人才输送渠道，组织校园宣讲会、招聘会等活动，促进人才供需双方高效对接，实现精准匹配。",
    },
    {
        title: "就业培训",
        icon: OfficeBuilding,
        description: "开展就业技能培训，提升求职者综合竞争力",
        detail: "开设职场软技能、行业知识、专业技能等培训课程，全方位提升求职者的就业竞争力，助力快速融入职场环境。",
    },
]);

// 常见问题数据
const faqItems = ref([
    {
        question: "简历应该如何突出个人优势？",
        answer: "简历突出个人优势的关键在于针对性展示与目标岗位相关的技能和经验。应当使用量化的成果和具体的案例来支持你的能力陈述，避免空洞的形容词。同时，将最重要的信息放在简历的前三分之一区域，确保招聘者在快速浏览时能立即看到你的核心竞争力。",
    },
    {
        question: "面试中如何应对薪资问题？",
        answer: "面对薪资问题，建议先了解行业和岗位的市场薪资水平。面试时可以给出一个合理的薪资范围，而不是具体数字，并表示有一定的灵活性。同时，可以强调你更看重的是职业发展机会和公司文化等其他因素，展示你不仅仅关注薪资。如果被问到期望薪资，可以反问面试官该岗位的薪资范围，然后再给出你的期望。",
    },
    {
        question: "如何选择适合自己的职业方向？",
        answer: "选择适合自己的职业方向需要考虑以下几点：1）个人兴趣爱好和价值观；2）个人技能和专业背景；3）行业前景和发展空间；4）工作与生活平衡需求。建议通过职业测评、行业调研、与从业者交流等方式，多方位了解不同职业的实际情况，做出更适合自己的选择。",
    },
    {
        question: "没有相关工作经验如何求职？",
        answer: "没有相关工作经验可以从以下几方面着手：1）突出实习经历、项目经验和校园活动中的相关技能；2）参加志愿者活动或行业比赛积累经验；3）通过在线课程或培训获取相关技能认证；4）在求职信中强调你的学习能力和对该行业的热情；5）考虑从入门级岗位开始，逐步积累经验。",
    },
    {
        question: "如何提高面试成功率？",
        answer: "提高面试成功率的关键在于充分准备。面试前应深入研究目标公司和岗位要求，准备与岗位相关的案例和故事，练习常见面试问题的回答。面试中保持专业形象和积极态度，注意倾听，有针对性地回答问题，展示你能为公司带来的价值。面试后及时发送感谢邮件，保持沟通渠道开放，展示你的诚意和专业素养。",
    },
    {
        question: "就业服务平台如何帮助我找工作？",
        answer: "我们的就业服务平台通过多种方式帮助求职者找工作：1）提供精准的职位推荐；2）组织线上线下招聘会；3）提供一对一简历修改和面试辅导；4）开设职业发展课程和讲座；5）提供行业资讯和薪资报告，帮助求职者了解市场动态；6）建立校企合作网络，为求职者拓展就业机会。",
    },
]);

// 就业资讯数据
const newsItems = ref([
    {
        title: "2023年IT行业就业形势分析",
        date: "2023-11-15",
        source: "就业研究中心",
        summary: "2023年IT行业整体保持稳定增长，人工智能、云计算、数据安全领域人才需求旺盛。",
    },
    {
        title: "金融科技领域人才需求激增",
        date: "2023-11-10",
        source: "行业观察",
        summary: "随着金融数字化转型加速，金融科技领域对复合型人才的需求持续增长。",
    },
    {
        title: "制造业数字化转型带动新职位创造",
        date: "2023-11-05",
        source: "产业分析",
        summary: "智能制造、工业互联网等新技术应用，推动制造业数字化转型，创造大量新型就业岗位。",
    },
    {
        title: "疫情后企业招聘策略变化调研报告",
        date: "2023-10-25",
        source: "人力资源研究",
        summary: "疫情后企业更加注重员工灵活办公能力和抗压能力，招聘策略和评价体系发生明显变化。",
    },
]);

// 就业指导课程数据
const courseItems = ref([
    {
        title: "职场软技能提升",
        instructor: "张教授",
        time: "每周三 19:00-21:00",
        location: "线上直播",
        capacity: "100人",
    },
    {
        title: "简历优化与面试技巧",
        instructor: "李老师",
        time: "每周六 14:00-16:00",
        location: "就业指导中心",
        capacity: "50人",
    },
    {
        title: "职业规划与发展",
        instructor: "王老师",
        time: "每周日 09:00-11:00",
        location: "线上直播",
        capacity: "无限制",
    },
    {
        title: "行业前沿技术讲座",
        instructor: "多位行业专家",
        time: "每月最后一个周五",
        location: "学术报告厅",
        capacity: "200人",
    },
]);

// 导航到就业岗位页面
const navigateToJobs = () => {
    router.push("/job");
};

onBeforeMount(() => {});
onMounted(() => {});
onUnmounted(() => {});
</script>

<template>
    <div class="scroll_main">
        <div class="employment-service-page">
            <headerIndex></headerIndex>

            <!-- 主内容区域 -->
            <el-container>
                <el-main>
                    <!-- 顶部横幅 -->
                    <div class="banner-container">
                        <el-row justify="center" align="middle" class="banner">
                            <el-col :span="24" :md="12" class="banner-text">
                                <h1>就业服务中心</h1>
                                <p>为您提供全方位、专业化的就业指导与服务支持</p>
                                <el-button type="primary" size="large" @click="navigateToJobs">
                                    浏览就业岗位 <el-icon class="el-icon--right"><ArrowRight /></el-icon>
                                </el-button>
                            </el-col>
                        </el-row>
                    </div>

                    <!-- 主要内容 -->
                    <div class="service-content">
                        <!-- 服务导航标签 -->
                        <el-tabs v-model="activeTab" class="service-tabs">
                            <el-tab-pane label="服务介绍" name="service"></el-tab-pane>
                            <el-tab-pane label="就业资讯" name="news"></el-tab-pane>
                            <el-tab-pane label="就业指导" name="guide"></el-tab-pane>
                            <el-tab-pane label="常见问题" name="faq"></el-tab-pane>
                        </el-tabs>

                        <!-- 服务介绍内容 -->
                        <div v-show="activeTab === 'service'" class="service-content-section">
                            <el-row :gutter="20" class="service-intro">
                                <el-col :span="24">
                                    <el-card shadow="hover" class="service-intro-card">
                                        <template #header>
                                            <div class="card-header">
                                                <h3>就业服务平台简介</h3>
                                            </div>
                                        </template>
                                        <div class="service-intro-content">
                                            <p>
                                                就业直通车平台是一站式就业服务平台，旨在为求职者提供全方位的就业支持。平台整合了丰富的就业资源，提供职业规划、简历辅导、面试培训、岗位匹配等服务，帮助求职者顺利实现就业目标。
                                            </p>
                                            <p>
                                                我们与众多知名企业建立了稳定的合作关系，定期组织线上线下招聘活动，为求职者提供优质的就业机会。同时，平台还提供行业动态、薪资水平等就业资讯，帮助求职者了解行业发展趋势，作出明智的职业选择。
                                            </p>
                                        </div>
                                    </el-card>
                                </el-col>
                            </el-row>

                            <el-divider content-position="center">我们的服务</el-divider>

                            <el-row :gutter="20" class="service-items">
                                <el-col
                                    v-for="(item, index) in serviceItems"
                                    :key="index"
                                    :xs="24"
                                    :sm="12"
                                    :md="8"
                                    class="service-item"
                                >
                                    <el-card shadow="hover" class="service-card">
                                        <div class="service-icon">
                                            <el-icon :size="40"><component :is="item.icon" /></el-icon>
                                        </div>
                                        <h3>{{ item.title }}</h3>
                                        <p class="service-desc">{{ item.description }}</p>
                                        <el-collapse>
                                            <el-collapse-item title="查看详情">
                                                <p>{{ item.detail }}</p>
                                            </el-collapse-item>
                                        </el-collapse>
                                    </el-card>
                                </el-col>
                            </el-row>

                            <el-divider content-position="center">合作伙伴</el-divider>

                            <el-row :gutter="20" class="partners">
                                <el-col :span="24">
                                    <el-carousel :interval="4000" type="card" height="200px">
                                        <el-carousel-item v-for="i in 6" :key="i">
                                            <div class="partner-item">
                                                <el-image
                                                    style="width: 160px; height: 160px"
                                                    :src="partnerLogo"
                                                    fit="contain"
                                                />
                                            </div>
                                        </el-carousel-item>
                                    </el-carousel>
                                </el-col>
                            </el-row>
                        </div>

                        <!-- 就业资讯内容 -->
                        <div v-show="activeTab === 'news'" class="service-content-section">
                            <el-row :gutter="20" class="news-section">
                                <el-col :span="24">
                                    <el-card shadow="hover" class="section-title-card">
                                        <h2>最新就业资讯</h2>
                                        <p>关注最新行业动态，把握就业市场趋势</p>
                                    </el-card>
                                </el-col>

                                <el-col :span="24" v-for="(news, index) in newsItems" :key="index" class="news-item">
                                    <el-card shadow="hover" class="news-card">
                                        <div class="news-header">
                                            <h3>{{ news.title }}</h3>
                                            <div class="news-meta">
                                                <span>{{ news.date }}</span>
                                                <el-divider direction="vertical" />
                                                <span>来源: {{ news.source }}</span>
                                            </div>
                                        </div>
                                        <p class="news-summary">{{ news.summary }}</p>
                                        <div class="news-action">
                                            <el-button link type="primary">阅读全文</el-button>
                                        </div>
                                    </el-card>
                                </el-col>

                                <el-col :span="24" class="pagination-container">
                                    <el-pagination layout="prev, pager, next" :total="50" background />
                                </el-col>
                            </el-row>
                        </div>

                        <!-- 就业指导内容 -->
                        <div v-show="activeTab === 'guide'" class="service-content-section">
                            <el-row :gutter="20" class="guide-section">
                                <el-col :span="24">
                                    <el-card shadow="hover" class="section-title-card">
                                        <h2>就业指导课程</h2>
                                        <p>专业课程助力职场成长，提升就业竞争力</p>
                                    </el-card>
                                </el-col>

                                <el-col :span="24">
                                    <el-table :data="courseItems" style="width: 100%" stripe border>
                                        <el-table-column prop="title" label="课程名称" width="180" />
                                        <el-table-column prop="instructor" label="授课老师" width="120" />
                                        <el-table-column prop="time" label="课程时间" />
                                        <el-table-column prop="location" label="授课地点" width="120" />
                                        <el-table-column prop="capacity" label="课程容量" width="100" align="center" />
                                        <el-table-column fixed="right" label="操作" width="100" align="center">
                                            <template #default>
                                                <el-button link type="primary" size="small">报名</el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </el-col>

                                <el-col :span="24" class="resource-section">
                                    <el-card shadow="hover" class="resource-card">
                                        <template #header>
                                            <div class="card-header">
                                                <h3>就业资源推荐</h3>
                                            </div>
                                        </template>
                                        <el-row :gutter="20">
                                            <el-col :xs="24" :sm="12" v-for="i in 4" :key="i" class="resource-item">
                                                <el-card shadow="hover" class="inner-card">
                                                    <div class="resource-content">
                                                        <el-image
                                                            style="width: 80px; height: 80px"
                                                            :src="`https://tse1-mm.cn.bing.net/th/id/OIP-C.x_j4oT7PxgXHjBxp7DRaYwHaHa?w=163&h=180&c=7&r=0&o=5&pid=1.7`"
                                                            fit="cover"
                                                        />
                                                        <div class="resource-info">
                                                            <h4>就业资源包 {{ i }}</h4>
                                                            <p>包含简历模板、面试技巧和行业分析等资料</p>
                                                            <el-button type="primary" plain size="small"
                                                                >下载资源</el-button
                                                            >
                                                        </div>
                                                    </div>
                                                </el-card>
                                            </el-col>
                                        </el-row>
                                    </el-card>
                                </el-col>
                            </el-row>
                        </div>

                        <!-- 常见问题内容 -->
                        <div v-show="activeTab === 'faq'" class="service-content-section">
                            <el-row :gutter="20" class="faq-section">
                                <el-col :span="24">
                                    <el-card shadow="hover" class="section-title-card">
                                        <h2>就业常见问题</h2>
                                        <p>解答求职过程中的常见困惑，助您顺利求职</p>
                                    </el-card>
                                </el-col>

                                <el-col :span="24" class="faq-content">
                                    <el-collapse accordion>
                                        <el-collapse-item v-for="(faq, index) in faqItems" :key="index">
                                            <template #title>
                                                <div class="faq-question">
                                                    <el-icon><QuestionFilled /></el-icon>
                                                    <span>{{ faq.question }}</span>
                                                </div>
                                            </template>
                                            <div class="faq-answer">
                                                {{ faq.answer }}
                                            </div>
                                        </el-collapse-item>
                                    </el-collapse>
                                </el-col>

                                <el-col :span="24" class="contact-section">
                                    <el-card shadow="hover" class="contact-card">
                                        <template #header>
                                            <div class="card-header">
                                                <h3>没有找到你的问题？</h3>
                                            </div>
                                        </template>
                                        <p>如果您有其他问题，可以通过以下方式联系我们的就业顾问</p>
                                        <div class="contact-methods">
                                            <el-row :gutter="20">
                                                <el-col :xs="24" :sm="8">
                                                    <div class="contact-method">
                                                        <el-icon :size="30"><Phone /></el-icon>
                                                        <h4>电话咨询</h4>
                                                        <p>400-123-4567</p>
                                                    </div>
                                                </el-col>
                                                <el-col :xs="24" :sm="8">
                                                    <div class="contact-method">
                                                        <el-icon :size="30"><Message /></el-icon>
                                                        <h4>邮件咨询</h4>
                                                        <p>service@jyztc.com</p>
                                                    </div>
                                                </el-col>
                                                <el-col :xs="24" :sm="8">
                                                    <div class="contact-method">
                                                        <el-icon :size="30"><ChatLineRound /></el-icon>
                                                        <h4>在线咨询</h4>
                                                        <el-button type="primary">立即咨询</el-button>
                                                    </div>
                                                </el-col>
                                            </el-row>
                                        </div>
                                    </el-card>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </el-main>
            </el-container>

            <footerIndex></footerIndex>
        </div>
        <el-backtop :bottom="80" target=".scroll_main" />
    </div>
</template>

<style scoped>
.employment-service-page {
    min-height: 100vh;
    background-color: #f6f7f9;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    width: 100%;
}

.el-main {
    padding: 0;
    flex: 1;
    overflow-x: hidden;
}

/* 顶部横幅 */
.banner-container {
    background: linear-gradient(135deg, #1976d2, #64b5f6);
    color: white;
    padding: 60px 20px;
    text-align: center;
    margin-bottom: 30px;
    width: 100%;
}

.banner h1 {
    font-size: 36px;
    margin-bottom: 20px;
}

.banner p {
    font-size: 18px;
    margin-bottom: 30px;
    opacity: 0.9;
}

/* 主内容 */
.service-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 50px;
    box-sizing: border-box;
    width: 100%;
}

.service-tabs {
    margin-bottom: 30px;
}

/* 服务介绍样式 */
.service-intro {
    margin-bottom: 30px;
}

.service-intro-card {
    border-radius: 10px;
    overflow: hidden;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.service-intro-content p {
    margin-bottom: 15px;
    line-height: 1.7;
}

.service-items {
    margin-bottom: 30px;
}

.service-item {
    margin-bottom: 20px;
}

.service-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.service-card:hover {
    transform: translateY(-5px);
}

.service-icon {
    display: flex;
    justify-content: center;
    margin: 20px 0;
    color: #409eff;
}

.service-card h3 {
    text-align: center;
    margin: 10px 0;
    font-size: 18px;
}

.service-desc {
    text-align: center;
    color: #606266;
    margin-bottom: 15px;
    flex: 1;
}

/* 合作伙伴轮播 */
.partners {
    margin-bottom: 30px;
}

.partner-item {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    border-radius: 8px;
}

:deep(.el-carousel__item) {
    background-color: transparent;
}

:deep(.el-carousel__item--card) {
    border: none;
}

:deep(.el-carousel__mask) {
    background-color: transparent;
}

/* 就业资讯样式 */
.section-title-card {
    margin-bottom: 20px;
    text-align: center;
    border-radius: 10px;
    background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
}

.section-title-card h2 {
    margin: 0;
    font-size: 24px;
    color: #303133;
}

.section-title-card p {
    margin: 10px 0 0;
    color: #606266;
}

.news-item {
    margin-bottom: 20px;
}

.news-card {
    border-radius: 10px;
    overflow: hidden;
}

.news-header {
    margin-bottom: 15px;
}

.news-header h3 {
    margin: 0 0 10px;
    font-size: 18px;
}

.news-meta {
    color: #909399;
    font-size: 14px;
}

.news-summary {
    color: #606266;
    margin-bottom: 15px;
}

.news-action {
    text-align: right;
}

.pagination-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

/* 就业指导样式 */
.guide-section {
    margin-bottom: 30px;
}

.resource-section {
    margin-top: 30px;
}

.resource-card {
    border-radius: 10px;
    overflow: hidden;
}

.resource-item {
    margin-bottom: 20px;
}

.inner-card {
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
}

.resource-content {
    display: flex;
    align-items: center;
}

.resource-info {
    margin-left: 15px;
    flex: 1;
}

.resource-info h4 {
    margin: 0 0 5px;
    font-size: 16px;
}

.resource-info p {
    color: #606266;
    margin-bottom: 10px;
    font-size: 14px;
}

/* FAQ样式 */
.faq-question {
    display: flex;
    align-items: center;
}

.faq-question .el-icon {
    margin-right: 10px;
    color: #409eff;
}

.faq-answer {
    padding: 10px 0;
    color: #606266;
    line-height: 1.7;
}

.contact-section {
    margin-top: 30px;
}

.contact-card {
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
}

.contact-methods {
    margin-top: 20px;
}

.contact-method {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

.contact-method .el-icon {
    margin-bottom: 15px;
    color: #409eff;
}

.contact-method h4 {
    margin: 0 0 10px;
    font-size: 16px;
}

.contact-method p {
    color: #606266;
    margin-bottom: 10px;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .banner h1 {
        font-size: 28px;
    }

    .banner p {
        font-size: 16px;
    }

    .service-content {
        padding: 0 15px 30px;
    }

    .section-title-card h2 {
        font-size: 20px;
    }
}

/* 确保所有卡片不会导致溢出 */
.el-card {
    max-width: 100%;
    box-sizing: border-box;
}

/* 确保轮播不会导致溢出 */
.el-carousel {
    max-width: 100%;
    overflow: hidden;
}
</style>
